<template>
  <view class="wrapper">
		
			<form @submit.stop="formSubmit" @reset="">
				<input type="text" hidden=true name="cateid" :value="selectedCir.id ? selectedCir.id:currentCir.id" />
				<input type="text" hidden=true name="video_data" :value="JSON.stringify(video_data)" maxlength="-1"/>
				<view class="intro">
					<textarea placeholder="分享你的新鲜事儿,小可爱~" cols="30" rows="30" maxlength="150"  name="body"  v-model="val"></textarea>
					<view class="count">
						<p :class="{'remnant':remnant!=0,'zero':remnant==150}">{{remnant}}</p>
						<view class="">/150</view>
					</view>
				</view>
				
			<view class="upload-area">
				<!-- 展示视频缩略图 -->
				<view class="images-area" >
					<view class="image-item" v-if="thumbTempFilePath">
						<image :src="thumbTempFilePath"></image>
						<view class="delete-icon" @tap.stop="delVideo" :data-index="index">
							<image src="/static/images/post/delete-image.svg" mode=""></image>
						</view>
					</view>
					<!-- 上传视频 -->
					<view class="upload" @tap="chooseMedia" v-if="!thumbTempFilePath" >
						<image src="/static/images/post/add-image.svg" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="select-circle" @tap.stop="selectCir">
				<image src="/static/images/post/circle.svg" mode="" class="circle-icon"></image>
				<view class="" v-if="selectedCir.name">{{selectedCir.name}}</view>
				<view v-else-if="currentCir.name" >{{currentCir.name}}</view>
				<view v-else>选择圈子</view>
				
				<image src="/static/images/user/godetail.png" mode=""></image>
			</view>
			<button type="primary" form-type="submit">发布</button>
		</form>
  </view>
</template>
 
<script>
	import api from '../../../common/api.js'
	import graceChecker from '../../../common/graceChecker.js'
	export default {
		
		data() {
			return {
				upload_api: this.uploadApi ,//图片上传url
				uploadVideo_api: this.uploadVideo_api ,//视频上传url
				val: "", //输入内容
				images:[],	//相集
				selectedCir:[], //发布的圈子
				currentCir:{id:null,name:null},
				repost:1,
				videoSrc: '', // 视频资源路径
				thumbTempFilePath: '', // 视频缩略图地址
				videoFile: '',
				video_data:[{"fileType":'',
					size:null,
					duration:null,
					width:null,
					height:null,
					videoSrc:'',// 视频资源路径
					thumbTempFilePath:'' // 视频缩略图地址
					}],
					
				
			};
		},
		
		computed: {
			remnant() {
				return  this.val.length;
			}
		},
		
		onLoad(p) {
			this.currentCir.id = p.cirid
			this.currentCir.name = p.cirname
		},
		
		onShow() {
			console.log('onshow');
			uni.$once('selectedCir',(res) => {
				console.log(res);
				this.selectedCir = res
			})
		},
		
		methods:{
			
			selectCir() {//选择发布圈子
				uni.navigateTo({
					url: '/pages/post/comps/category'
					
				});
			},
			
			async formSubmit(e) {//表单提交--发布打卡
				if(!this.repost) {
					uni.showToast({ title: '勿重复提交 ', icon: "none" });
					return 
				}
				var rule = [
					{name:"body", checkType : "notnull", errorMsg:"请填写发布内容"},
					{name:"cateid", checkType : "int", checkRule:"0,", errorMsg:"请选择发布圈子"},
				];
				//进行表单检查
				var checkRes = graceChecker.check(e.detail.value, rule);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return 
				}
				this.repost = 0 
				uni.showLoading({
					title:'提交中'
				});
				let {cateid,body,video_data} = e.detail.value
				console.log(e.detail.value);
				console.log(cateid,body,video_data);
				// let j_video_data = JSON.stringify(video_data)
				var res = await api.CreatePost(cateid,body,'','',video_data)
				console.log(res);
				if(res.err == 0)  {
					uni.hideLoading()
					uni.showToast({
						title:res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					},700)
				}
			},
			
			/* viewImage(e) {//预览图片
				uni.previewImage({
					urls: this.images,
					current: e.currentTarget.dataset.url
				});
			}, */
			
			delVideo(e) {//删除图片
				this.thumbTempFilePath = ''
			},
			
			chooseMedia() {//上传视频
					var _self = this
					uni.chooseMedia({
						count: 1,//最多可以选择的文件个数,默认9
						mediaType: ['image', 'video'], //文件类型：只能拍摄视频或从相册选择视频
						sourceType: ['album','camera'],  //从相册选择或者拍摄 'album','camera'
						maxDuration:30,//相机拍摄最大时长为30S
						camera: 'back', //默认摄像头是后置摄像头
						success: (res) => {
							console.log(res.tempFiles);
							res.tempFiles.forEach((item,index)=>{
								console.log(item);
								this.video_data.size = item.size,
								this.video_data.duration = item.duration,
								this.video_data.width = item.width,
								this.video_data.height = item.height,
								this.video_data.fileType = item.fileType
								uni.showLoading({title:"上传中"});
								//上传视频文件
								var uploadTask = uni.uploadFile({
									url: _self.uploadVideo_api,
									method:"POST",
									header:{"Content-Type":"multipart/form-data"},
									name:'file',
									filePath: item.tempFilePath,
									dataType: 'json',
									success: (uploadFileRes) => {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										console.log(jsondata)
										if( jsondata.err ==0 ){
											_self.videoSrc = jsondata.file_path
											_self.video_data.videoSrc = jsondata.file_path
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
												uni.showToast({
													title:jsondata.msg,
													icon:'none'
												})
											}
										
										// 上传视频缩略图
										var uploadTask = uni.uploadFile({
											url: _self.upload_api,
											filePath: item.thumbTempFilePath,
											fileType: 'image',
											name: 'file',
											dataType: 'json',
											success: function (uploadFileRes) {
												// 上传成功后返回服务器端保存的路径
												var jsondata1 = JSON.parse(uploadFileRes.data)
												console.log(jsondata1)
												if( jsondata1.err ==0 ){
													_self.thumbTempFilePath = jsondata1.file_path
													_self.video_data.thumbTempFilePath = jsondata1.file_path,
													console.log(_self.video_data);
													uni.hideLoading();
													uni.showToast({
														title: jsondata.msg,
														duration:800
													})
												}else{
														uni.showToast({
															title:jsondata.msg,
															icon:'none'
														})
													}
												}
										 });
										 // 上传视频缩略图
										}, 
										fail:res => {
											uni.showToast({
												title: '上传失败',
												duration:800
											})
											uni.hideLoading();
											console.log(res);
										}
								 });
							})
							let a = JSON.stringify(this.video_data)
							let b = JSON.parse(a)
							console.log(a);
							console.log(b);
						}
					});
			}
		}
	};
</script>
 
<style lang="scss" scoped>
page {
	background: #fff;
}
.wrapper {
	box-sizing: border-box;
	background-color: #fff;
}
.select-circle {
	display: flex;
	align-items: center;
	padding: 10rpx;
	margin-left: 10rpx;
	height: 55rpx;
	color: #0055ff;
	.circle-icon {
		margin-right: 4rpx;
	}
	image {
		width: 45rpx;
		height: 45rpx;
	}
}
.upload-area {
	/* width: 750rpx;
	margin: 0 auto;
	height: 1000rpx; */
	display: flex;
	justify-content: center;
	padding:  20rpx;
	.images-area {	
		display: flex; 
		flex-wrap: wrap;
		width: 700rpx;
		box-sizing: border-box;
		.image-item {
			position: relative;
			width: 220rpx;
			height: 210rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.delete-icon {
				position: absolute;
				right: 5rpx;
				top: 5rpx;
				image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
		.upload {
			width: 220rpx;
			height: 210rpx;
			margin-bottom: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.intro {
	position: relative;
	padding: 20rpx;
	background-color: #fff;
	border: 2rpx solid #eeeeee;
	.count {
		display: flex;
		position: absolute;
		color: #999;
		right: 10rpx;
		bottom: 10rpx;
		.remnant {
			color: #999;
		}
		.zero{
			color: #cb143c;
		}
	}
	textarea {
		height: 300rpx;
		width: 100%;
		font-size: 28rpx;
	}
}

	
</style>